<template>
  <div id="main">
    <back-home></back-home>
    <div id="stage"></div>
  </div>
</template>

<script>
import backHome from 'c/backHome';
import './Aui-core-1.42-min.js'


var Effect = function( a, w, h, s, p, x, y )
{
  var _3Deffect = function( array , width, height, stage, per, x, y  )
  { 
    this.oDoc = document;
    
    this.stage = stage;
    
    this.width = width;
    
    this.height = height;
    
    this.path = array;
    
    this.domStr = "<dt id=\"shadow\"></dt>";
    
    this.perspective = per,
    
    this.rotateX = x,
    
    this.rotateY = y,
    
    this.speedX=0,
    
    this.speedY=0;
    
  }
  
  _3Deffect.prototype = {
    
    transform : function( elem, value, key )
    {
      key = key || "transform";
      
      [ "-webkit-", "-moz-", "-ms-", "-o-", "" ].forEach( function( pre )
      {
        elem.style[ pre + key ] = value;
      }); 
      
      return elem;
    },
    
    piece : function( value, key )
    {
      var str = "";
      
      key = key || "transform";
      
      [ "-webkit-", "-moz-", "-ms-", "-o-",  "" ].forEach( function( pre )
      {
        str += ( key + ":" + pre + value );
        return false;
      }); 
      
      return str;
    },
    
    addEvent : function ( obj, sEvent, fn )
    {
      if( obj.attachEvent )
      {
        obj.attachEvent( "on" + sEvent, fn );
      }
      else
      {
        obj.addEventListener( sEvent, fn, false );
      };
    },

    // removeEvent: function ( obj, sEvent, fn )
    // {
    //   console.log("remove", obj, sEvent, fn )
    //   if( obj.attachEvent )
    //   {
    //     obj.detachEvent( "on" + sEvent, fn );
    //   }
    //   else
    //   {
    //     obj.removeEventListener( sEvent, fn, false );
    //   };
    // },
    
    onMouseWheel : function( e )
    {
      var _o = this;
      if( e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0 )
      {
        if( _o.perspective < 4000 )
        {
          _o.perspective += 150;
        };

      }
      else
      {
        if( _o.perspective > 350 )
        {
          _o.perspective -= 150;
        };
      };
      
      _o.transform( _o.stage[0], "perspective(" + _o.perspective + "px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" );
      
      if( e.preventDefault )
      {
        e.preventDefault();
      };
      
      return false;
    },
    
    startMove : function startMove( obj )
    {
      var _o = this;
      
      obj.timer = obj.timer || null;
      
      clearInterval( obj.timer );
      
      obj.timer = setInterval (function ()
      {
        _o.rotateX -= _o.speedY;
        _o.rotateY += _o.speedX;
        
        _o.speedY *= 0.93;
        _o.speedX *= 0.93;
        
        if( Math.abs( _o.speedX ) < 0.1 && Math.abs( _o.speedY ) < 0.1 )
        {
          _o.stopMove( obj.timer );
        };
        
        _o.transform( obj, "perspective(" + _o.perspective + "px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" );
        
      }, 30);
    },
    
    stopMove : function( t )
    {
      clearInterval( t );
    },

    // wheel : function( e )
    // {
    //   var _o = this;
    //   console.log('9999',_o, e)
    //   _o.onMouseWheel.call( _o, e || window.event );
    // },

    // destroy: function()
    // {
    //   var _o = this;
    //   console.log('ddddddddddddddddddestroy', _o)

    //   _o.removeEvent( _o.oDoc, "mousewheel", _o.wheel );
    //   _o.removeEvent( _o.oDoc, "DOMMouseScroll", _o.wheel );

    // },
    
    init : function()
    {
      var _o = this;
      
      Aui.each( _o.path, function( i )
      {
        var shadow = _o.piece( "linear-gradient(top, rgb(0, 0, 0) 50%, rgba(255, 255, 255, 0)), url(" + this + ");", "background-image" ),
          shadow = "<div class=\"over\" style=\"" + shadow + "\"></div>";
          
        _o.domStr += "<dd style=\"background-image:url("+ this +");\">" + shadow + "</dd>";
      });

      Aui( _o.stage ).html( _o.domStr );
      
      var _oList = Aui( "dd",  _o.stage ),
      
        _sLen = _o.path.length,
        
        _deg = 360/_sLen,
        
        _tranZ = ( _o.width/2 + 40 ) / Math.tan( ( 360/_sLen/2 ) * Math.PI / 180 ),
        
        _i = _sLen;
      
      while( _i > 0 )
      {
        ( function( d, len, _oList, _o )
        {
          setTimeout( function()
          {
            var idx = len - d,
              oThis = _oList[ idx ]

            oThis.children[0].style.opacity = 0.2;
            
            _o.transform( oThis, "rotateY(" + ( idx*_deg ) +"deg) translateZ(" + _tranZ + "px)" );
            
          }, d * 200 );
          
        })( _i-- , _sLen, _oList, _o );
      };
      
      var wheel = function( e )
      {
        _o.onMouseWheel.call( _o, e || window.event );
      }
      
      _o.addEvent( _o.stage[0], "mousewheel", wheel );
      _o.addEvent( _o.stage[0], "DOMMouseScroll", wheel );
      // _o.addEvent( _o.oDoc, "mousewheel", wheel );
      // _o.addEvent( _o.oDoc, "DOMMouseScroll", wheel );
      
      var AuiDoc = Aui( _o.oDoc );
      
      AuiDoc.mousedown( function( e )
      {
        var moveX = e.clientX,
          moveY = e.clientY;
          
        var startX = _o.rotateX;
        var startY = _o.rotateY;
        
        var lastX = moveX;
        var lastY = moveY;
        
        _o.speedX = _o.speedY = 0;
        
        AuiDoc.mousemove( function( e )
        {
          var x = e.screenX,
            y = e.screenY;
    
          _o.rotateY = startY + ( e.clientX - moveX )/10;
          _o.rotateX = startX - ( e.clientY - moveY )/10;
          
          _o.transform( _o.stage[0], "perspective("+ _o.perspective +"px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" );
          
          _o.speedX =( e.clientX - lastX )/5;
          
          _o.speedY =( e.clientY - lastY )/5;
          
          lastX = e.clientX;
          lastY = e.clientY;
          
        });
        
        AuiDoc.mouseup( function()
        {
          this.onmousemove = null;
          
          this.onmouseup = null;
          
          _o.startMove( _o.stage[0] );
        });
        
        _o.stopMove( _o.stage[0].timer );
        
        return false;
      } );
      
      return _o;
    }
    
  };
  
  return new _3Deffect( a, w, h, s, p, x, y );
};



export default {
  components: {
    backHome
  },
  data() {
    return {
      effectObj: null,
    };
  },
  created() {
    
  },
  mounted(){
    this.init()
  },
  // beforeRouteLeave(to, form, next) {
  //   this.effectObj.destroy()
  //   next()
  // },
  computed: {},
  methods: {
    init(){
      this.effectObj =  Effect( 
        [
          require("@/assets/images/01.jpg"),
          require("@/assets/images/02.jpg"),
          require("@/assets/images/03.jpg"),
          require("@/assets/images/04.jpg"),
          require("@/assets/images/05.jpg"),
          require("@/assets/images/06.jpg"),
          require("@/assets/images/07.jpg"),
          require("@/assets/images/08.jpg"),
          require("@/assets/images/09.jpg"),
        ],
        200,
        300,
        Aui.byID("#stage"),
        2000,
        -10,
        0
      )
      this.effectObj.init();

      // Aui.ready( function()
      //   {
      //     if( /ie/g.test( Aui.browser() ) )
      //     {
      //       Aui("body").html("Adam CSS 3.0 effect，支持非IE浏览器。你懂的！")
      //              .setStyle(
      //              {
      //               "color" : "#fff",
      //               "text-align" : "center",
      //               "font-size" : "50px",
      //               "font-weight" : "bolder",
      //               "line-height" : "500px"
      //              });
      //     }
      //     else
      //     {
      //       Effect( 
      //         [
      //           require("./images/01.jpg"),
      //           require("./images/02.jpg"),
      //           require("./images/03.jpg"),
      //           require("./images/01.jpg"),
      //           require("./images/02.jpg"),
      //           require("./images/03.jpg"),
      //           require("./images/01.jpg"),
      //           require("./images/02.jpg"),
      //           require("./images/03.jpg"),
      //         ],
      //         200,
      //         300,
      //         Aui.byID("#stage"),
      //         2000,
      //         -10,
      //         0
      //        ).init();
      //     };
      //   });
    },
    
  }
};
</script>

<style lang='scss' scoped>
#main {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  top: 0;
  left: 0;
  overflow: hidden;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss'>

#stage{width:200px;height:300px;position:relative;margin:0 auto;margin-top:150px;background:null;-webkit-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);-moz-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);-ms-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);-o-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}
#stage #shadow{position:absolute;left:50%;top:50%;width:1200px;height:1200px;margin-left:-600px;margin-top:-600px;background:-webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));background:-moz-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));background:-ms-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));background:-o-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));background:radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));-webkit-transform:translateY(200px) rotateX(90deg);-moz-transform:translateY(200px) rotateX(90deg);-ms-transform:translateY(200px) rotateX(90deg);-o-transform:translateY(200px) rotateX(90deg);transform:translateY(200px) rotateX(90deg)}
#stage dd{height:300px;width:200px;position:absolute;left:0;top:0;border:1px solid #666;-webkit-transition:500ms all ease;-moz-transition:500ms all ease;-ms-transition:500ms all ease;-o-transition:500ms all ease;transition:500ms all ease;background-size: cover;background-position: center;}
#stage .over{position:absolute;left:0;top:320px;width:200px;height:300px;overflow:hidden;-webkit-transition:2s all ease;-moz-transition:2s all ease;-ms-transition:2s all ease;-o-transition:2s all ease;transition:2s all ease;-webkit-transform:scale(1,-1);-moz-transform:scale(1,-1);-ms-transform:scale(1,-1);-o-transform:scale(1,-1);transform:scale(1,-1);background-size:100% 100%;opacity:0}

</style>
